import { Fragment, type FC } from 'react';
import { Rect, Circle } from 'react-content-loader/native';
import More from './more';

type HeaderProps = {
  svgWidth: number;
}

export const avatarSize = 18;
export const headerHeight = avatarSize * 2;
export const contentX = avatarSize * 2 + 12;

const Header: FC<HeaderProps> = (props) => {
  const { svgWidth } = props;
  const buttonX = svgWidth - 96;
  
  return (
    <Fragment>
      <Circle cx={avatarSize} cy={avatarSize} r={avatarSize} />
      {/* 用户名 */}
      <Rect y={4} rx="5" ry="5" width={110} height={10} x={contentX} />
      {/* 时间 */}
      <Rect y={25} rx="3" ry="3" width={50} height={6} x={contentX} />
      {/* 按钮 */}
      <Rect y={4} rx="12" ry="12" width={80} height={24} x={buttonX} />
      {/* 更多 */}
      <More svgWidth={props.svgWidth} />
    </Fragment>
  );
}

export default Header;